<!--
 * @Description: App
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2021-07-03 11:41:05
 * @LastEditTime: 2023-08-16 10:27:30
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
    <prompt></prompt>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import prompt from './components/prompt.vue'
export default {
  name: 'App',
  components: {
    prompt
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true,
      status: '',
      isFirst: false,
      name: 'App',
      timer: null,
      previous: null,
      token: '',
      noticeNum: null,
      audio: null
    }
  },
  // 监听器
  watch: {
    async $route (to, from) {
    },
    'routesItem.attendant_name' (val, oldval) {
      this.mergeLocaleMessage()
    },
    'routesItem.have_police_notice' (val, oldval) {
      if (val) {
        if (this.noticeNum) {
          clearInterval(this.noticeNum)
        }
        this.getNoticeNum()
      }
    },
    'routesItem.have_order_notice' (val, oldval) {
      if (this.noticeNum) {
        clearInterval(this.noticeNum)
      }
      this.getNoticeNum()
    },
    'routesItem.police_num' (val, oldval) {
      let { help_voice: src, have_police_read: read } = this.routesItem
      if (read) {
        if (val > oldval && !this.audio) {
          this.playAudio(src, true)
        }
        if (val > 0) {
          this.toPlay(src, false)
        }
        if (val === 0 && this.audio) {
          this.audio.load()
          this.audio.src = ''
        }
      }
    },
    'routesItem.notice_audio' (val, oldval) {
      let { police_num: police, have_police_read: read } = this.routesItem
      let { id = 0, type } = val
      let { id: oid } = oldval
      if ((police > 0 && read) || !id || id === oid) return
      let src = `https://lbqny.migugu.com/admin/anmo/pc/order_notice${type}.mp3`
      if (!this.audio) {
        this.playAudio(src, false)
      } else {
        this.toPlay(src, false)
      }
    }
  },
  created () {
    this.getNoticeNum()
    this.mergeLocaleMessage()
  },
  mounted () {
    let that = this
    that.audio = null
    window.onresize = () => {
      that.fnThrottle(() => {
        let clientWidth = document.documentElement.clientWidth
        if (clientWidth < 1200) {
          that.$store.commit('handleAdSwitch', false)
        }
      }, 300)()
    }
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    ...mapMutations(['changePromptData', 'changeIsShowPrompt', 'changeRoutesItem']),
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    async getNoticeNum () {
      let { have_police_notice: police = 0, have_order_notice: order = 0 } = this.routesItem
      if (police || order) {
        this.getNoticeCount()
        this.noticeNum = setInterval(() => {
          this.getNoticeCount()
        }, 10000)
      }
    },
    async getNoticeCount () {
      let minitk = window.localStorage.getItem('massage_minitk')
      if (!minitk) return
      if (this.$route.path === '/count') return
      let { data } = await this.$api.shop.noLookCount()
      let { notice_num: notice = 0, police_num: police = 0, help_voice: src = '', notice_info: ninfo = {}, order_tmpl_notice: ntmpl = 0 } = data
      this.changeRoutesItem({ key: 'notice_num', val: notice })
      this.changeRoutesItem({ key: 'police_num', val: police })
      if (process.env.NODE_ENV === 'development') {
        ntmpl = 0
      }
      if (ntmpl) {
        this.changeRoutesItem({ key: 'notice_info', val: ninfo === null ? {} : ninfo })
      }
      let userInfo = JSON.parse(window.localStorage.getItem('massage_userInfo'))
      let { id } = userInfo
      let { have_police_read: read } = this.routesItem
      let isHelpNotice = read && police > 0
      if (id && isHelpNotice && this.audio && this.audio.paused) {
        this.toPlay(src, true)
      }
      this.changeRoutesItem({ key: 'help_voice', val: src })
      if (!isHelpNotice) {
        this.changeRoutesItem({ key: 'notice_audio', val: ninfo === null ? {} : ninfo })
      }
    },
    playAudio (src, loop) {
      if (this.$route.path === '/count') return
      let that = this
      this.audio = new Audio()
      this.audio.src = src
      this.audio.loop = loop
      let playPromise
      playPromise = this.audio.play()
      if (playPromise) {
        playPromise.then((res) => {
          console.error(res, '音频加载成功')
          that.audio.pause()
        }).catch((e) => {
          console.error(e, '音频加载失败')
        })
      }
    },
    toPlay (src, loop) {
      if (this.$route.path === '/count') return
      this.audio.load()
      this.audio.src = src
      this.audio.loop = loop
      this.audio.play()
    },
    async mergeLocaleMessage () {
      let zh = JSON.parse(JSON.stringify(this.$i18n.messages.zh))
      let { old_attendant_name: oldName, attendant_name: name } = this.routesItem
      let reg = new RegExp(oldName, 'g')
      for (let i in zh.action) {
        if (zh.action[i].includes(oldName)) {
          zh.action[i] = zh.action[i].replace(reg, name)
        }
      }
      for (let i in zh.menu) {
        if (zh.menu[i].includes(oldName)) {
          zh.menu[i] = zh.menu[i].replace(reg, name)
        }
      }
      zh.tips.franchiseeDelete = zh.tips.franchiseeDelete.replace(reg, name)
      this.$i18n.mergeLocaleMessage('zh', zh)
      this.changeRoutesItem({ key: 'old_attendant_name', val: name })
    },
    fnThrottle (fn, delay, atleast) {
      let that = this
      return function () {
        let now = +new Date()
        if (!that.previous) that.previous = now
        if (atleast && now - that.previous > atleast) {
          fn()
          that.previous = now
          clearTimeout(that.timer)
        } else {
          clearTimeout(that.timer)
          that.timer = setTimeout(function () {
            fn()
            that.previous = null
          }, delay)
        }
      }
    }
  }
}
</script>

<style lang='scss'>
@import url('./style/reset.css');
@import url('./style/icon.css');
@import url('./style/base.css');
@import url('./style/diy.css');
@import url('./style/common.css');
</style>
